<template>
	<div class="xtx-pagination" v-if="myTotal > 0">
		<a v-if="myCurrentPage<=1" href="javascript:;" class="disabled">上一页</a>
		<a @click="changePage(myCurrentPage-1)" v-else href="javascript:;">上一页</a>
		<span v-if="pager.start>1">...</span>
		<a @click="changePage(i)" href="javascript:;" :class="{active:i===myCurrentPage}" v-for="i in pager.btnArr"
			:key="i">{{i}}</a>
		<span v-if="pager.end<pager.pageCount">...</span>
		<a v-if="myCurrentPage>=pager.pageCount" href="javascript:;" class="disabled">下一页</a>
		<a @click="changePage(myCurrentPage+1)" v-else href="javascript:;">下一页</a>
	</div>
</template>

<script>
	import {
		ref,
		computed,
		watch
	} from 'vue'

	export default {
		name: 'XtxPagination',

		props: {
			total: {
				type: Number,
				default: 100
			},
			currentPage: {
				type: Number,
				default: 1
			},
			pageSize: {
				type: Number,
				default: 10
			}
		},

		setup(props, {emit}) {
			const myTotal = ref(100)
			const myPageSize = ref(10)
			const myCurrentPage = ref(1)
			const btnCount = 5

			const pager = computed(() => {
				const pageCount = Math.ceil(myTotal.value / myPageSize.value)

				let start = myCurrentPage.value - Math.floor(btnCount / 2)
				let end = start + btnCount - 1

				if (start < 1) {
					start = 1
					end = (start + btnCount - 1) > pageCount ? pageCount : (start + btnCount - 1)
				}
				if (end > pageCount) {
					end = pageCount
					start = (end - btnCount + 1) < 1 ? 1 : (end - btnCount + 1)
				}

				const btnArr = []
				for (let i = start; i <= end; i++) {
					btnArr.push(i)
				}

				return {
					pageCount,
					start,
					end,
					btnArr
				}
			})

			watch(props, () => {
				myTotal.value = props.total
				myPageSize.value = props.pageSize
				myCurrentPage.value = props.currentPage
			}, {
				immediate: true
			})

			const changePage = newPage => {
				if(myCurrentPage.value !== newPage) {
					myCurrentPage.value = newPage
					emit('current-change', newPage)
				}	
			}

			return {
				pager,
				myCurrentPage,
				changePage,
				myTotal
			}
		}
	}
</script>

<style lang="less" scoped>
	.xtx-pagination {
		display: flex;
		justify-content: center;
		padding: 30px;

		>a {
			display: inline-block;
			padding: 5px 10px;
			border: 1px solid #e4e4e4;
			border-radius: 4px;
			margin-right: 10px;

			&:hover {
				color: @xtxColor;
			}

			&.active {
				background: @xtxColor;
				color: #fff;
				border-color: @xtxColor;
			}

			&.disabled {
				cursor: not-allowed;
				opacity: 0.4;
			}

			&:hover {
				color: #333
			}
		}

		>span {
			margin-right: 10px;
		}
	}
</style>
